@import "~slick-carousel/slick/slick.css";
@import "~slick-carousel/slick/slick-theme.css";

.slick-slider{
    .slick-list{
        width: 100%;
        height: 640px;
        overflow: hidden;
        img{
            width: 100%;
            height: 640px;
        }
    }
    .slick-dots{
        bottom: 30px;
        li{
            button{      
                width: 16px;
                height: 16px;        
                padding: 0;    
                &::before{
                    content: '';
                    width: 16px;
                    height: 16px; 
                    color: rgba(0, 0, 0, 0);
                    border: 2px solid #b9beba;
                    border-radius: 50%;
                }
            }
            &.slick-active{
                button{
                    &::before{
                        color: white;
                        border-color: #ffffff;
                    }
                }
            }
        }
    }

    .slick-dots li button:hover:before, .slick-dots li button:focus:before {
        color: #ffffff;
        border-color: #ffffff;
    }
    .slick-prev{
        width: 40px;
        height: 80px;
        color: #ffffff;
        background-color: rgba(0,0,0,.2);
        left: 10%;
        z-index: 99;
        &.hover{
            background-color: rgba(0,0,0,.5);
        }
    }
    .slick-next{
        width: 40px;
        height: 80px;
        color: #ffffff;
        background-color: rgba(0,0,0,.2);
        right: 10%;
        z-index: 99;
    }
}